<script src="../../assets/js/vendor/vue.min.js"></script>
<!-- main header start -->
<div class="main-header d-none d-lg-block">
    <!-- header top start -->
    <div class="header-top black-bg">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="top-left-navigation">
                        <ul class="nav align-items-center">
                            <li class="language">
                                <p>永远相信，美好的事情即将发生！</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6 d-flex justify-content-end">
                    <ul class="user-info-block" id="change">
<!--                        <li><a href="/view/user/my-account.html"><i class="fa fa-user-circle"></i> 我的账户</a></li>-->
                        <template v-if="nickname==''">
                            <li><a href="/view/user/login-register.html"><i class="fa fa-sign-in"></i>登录｜注册</a></li>
                        </template>
                        <template v-else >
                            <li><a href="/view/user/my-account.html"><i class="fa fa-user-circle"></i> {{nickname}}</a></li>
                            <li><a  href="javascript:void(0)" @click="check"><i class="fa fa-credit-card"></i>结算产品</a></li>
                            <li><a href="javascript:void(0)" @click="logout" ><i class="fa fa-sign-in"></i>退出</a></li>
                        </template>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- header top end -->

    <!-- header middle area start -->
    <div class="header-main-area black-soft sticky">
        <div class="container">
            <div class="row align-items-center position-relative">
                <!-- start logo area -->
                <div class="col-auto">
                    <div class="logo">
                        <a href="../index.html">
                            <img src="../../assets/img/logo/logo.png" alt="Brand Logo">
                        </a>
                    </div>
                </div>
                <!-- start logo area -->

                <!-- main menu area start -->
                <div class="col-auto position-static">
                    <div class="main-menu-area">
                        <div class="main-menu">
                            <!-- main menu navbar start -->
                            <nav class="desktop-menu">
                                <ul>
                                    <li class="active"><a href="/">主页</a></li>
                                    <li><a href="/view/product/shop.html">购买</a></li>
                                    <li><a href="/view/other/contact-us.html">联系我们</a></li>
                                </ul>
                            </nav>
                            <!-- main menu navbar end -->
                        </div>
                    </div>
                </div>
                <!-- main menu area end -->

                <!-- mini cart area start -->
                <div class="col-auto ml-auto" id="cartView">
                    <div class="header-right">
                        <div class="header-configure-area">
                            <ul class="nav">
                                <li>
                                    <a href="#" class="search-trigger"><i class="fa fa-search"></i></a>
                                </li>
                                <li class="mini-cart-wrap" v-if="cartData!=''">
                                    <a href="#" class="minicart-btn">
                                        <i class="fa fa-shopping-cart"></i>
                                        <span class="notification">{{cartData.productNum}}</span>
                                    </a>
                                    <div class="cart-list-wrapper" >
                                        <ul class="cart-list">
                                            <li  v-for="product in cartData.products">
                                                <div class="cart-img">
                                                    <a :href="'product-details.html?id='+product.id"><img
                                                            :src="product.pics[0].path" alt="加载失败"></a>
                                                </div>
                                                <div class="cart-info">
                                                    <h6 class="product-name"><a
                                                            :href="'product-details.html?id='+product.id">{{product.name}}</a></h6>
                                                    <span class="cart-qty">数量: {{product.num}}</span>
                                                    <span class="item-price">¥{{product.newPrice}}</span>
                                                </div>
                                                <div class="del-icon">
                                                    <i class="fa fa-times" @click="delCartProduct(product.id)"></i>
                                                </div>
                                            </li>
                                        </ul>
                                        <ul class="minicart-pricing-box">
                                            <li>
                                                <span>小计</span>
                                                <span><strong>¥{{cartData.subtotal}}</strong></span>
                                            </li>
                                            <li>
                                                <span>快递费用</span>
                                                <span><strong>¥{{cartData.emsPrice}}</strong></span>
                                            </li>
                                            <li class="total">
                                                <span>总共</span>
                                                <span><strong>¥{{cartData.total}}</strong></span>
                                            </li>
                                        </ul>
                                        <div class="minicart-button">
                                            <a href="/view/product/cart.html"><i class="fa fa-shopping-cart"></i> 查看购物车</a>
                                            <a href="/view/user/checkout.html"><i class="fa fa-share"></i> 结算</a>
                                        </div>

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- mini cart area end -->

            </div>
        </div>
    </div>
    <!-- header middle area end -->
</div>
<div class="offcanvas-search-wrapper">
    <div class="offcanvas-search-inner">
        <div class="offcanvas-close">
            <i class="fa fa-close"></i>
        </div>
        <div class="container">
            <div class="offcanvas-search-box">
                <div class="d-flex bdr-bottom w-100">
                    <input id="searchKey" type="text" placeholder="Search entire storage here...">
                    <button class="search-btn" onclick="search()"><i class="fa fa-search"></i>search</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>
<script src="../../assets/js/header/header.js"></script>
<!-- Modernizer JS -->
<script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="../../assets/js/vendor/bootstrap.min.js"></script>
<!-- slick Slider JS -->
<script src="../../assets/js/plugins/slick.min.js"></script>
<!-- Countdown JS -->
<script src="../../assets/js/plugins/countdown.min.js"></script>
<!-- Nice Select JS -->
<script src="../../assets/js/plugins/nice-select.min.js"></script>
<!-- jquery UI JS -->
<script src="../../assets/js/plugins/jqueryui.min.js"></script>
<!-- Image zoom JS -->
<script src="../../assets/js/plugins/image-zoom.min.js"></script>
<!-- image loaded js -->
<script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- masonry  -->
<script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
<!-- mailchimp active js -->
<script src="../../assets/js/plugins/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="../../assets/js/plugins/ajax-mail.js"></script>
<!-- Main JS -->
<script src="../../assets/js/main.js"></script>
<script src="../../assets/js/plugins/utils.js"></script>
<script type="text/javascript">
    function search() {
        console.log('111111')
        var key = $("#searchKey").val();
        console.log(key);
        if (key != '') {
            console.log('22222')
            window.location.href = "/view/product/shop.html?key="+key;
        }
    }
</script>

<!-- off-canvas menu end -->
<!-- offcanvas mobile menu end -->